<template>
  <!-- 表单弹窗 -->
  <a-modal
    v-bind="$attrs"
    :title="title"
    :visible.sync="dialogVisible"
    v-on="$listeners"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-spin
      class="dialogBox"
      :spinning="loading"
      style="margin: 0 auto; text-align: left;"
      :style="styles"
    >
      <slot name="formHeader" />
      <UploadTableNew v-if="fileList.length > 0" class="mb20" disabled :init-file-list="fileList" />
      <!-- 表单 -->
      <custom-form
        ref="ruleForm"
        is-validate
        :form="forms"
        :form-list="formList"
        :rules="rules"
        :edit-model="editModel"
        :isEmit="isEmit"
        v-on="$listeners"
      >
        <!-- 插槽 -->
        <template v-for="item in formList" v-slot:[item.keyName]="scoped">
          <slot v-if="item.slot" :name="item.keyName" v-bind="scoped" />
        </template>
      </custom-form>
      <slot name="formFooter" />
    </a-spin>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <slot v-if="customFooter" name="footer" />
      <template v-else>
        <a-button v-if="closeButton" @click="handleCancel" class="button_right"> 关闭 </a-button>
        <a-button v-if="editModel != 'V'" :loading="loading" type="primary" @click="handleOk">
          {{ confirmBtn }}
        </a-button>
      </template>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: 'DialogForm',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    // api对象
    api: {
      type: Object,
      default: () => null
    },
    // api请求方法
    apiName: {
      type: String,
      default: () => 'getDetail'
    },
    // 显隐控件
    visible: {
      type: Boolean,
      default: () => false
    },
    // 容器样式
    styles: {
      type: Object,
      default: () => ({})
    },
    // 表单
    form: {
      type: Object,
      default: () => null
    },
    // 确定按钮
    confirmBtn: {
      type: String,
      default: () => '提交'
    },
    // 表单组件列表
    formList: {
      type: Array,
      default: () => []
    },
    // 标题
    headerTitle: {
      type: String,
      default: () => ''
    },
    // 表单校验规则
    rules: {
      type: [Object],
      default: () => {}
    },
    // 操作类型
    editModel: {
      type: String,
      default: () => 'V'
    },
    // 是否自定义页脚按钮
    customFooter: {
      type: Boolean,
      default: () => false
    },
    // 是否显示关闭按钮
    closeButton: {
      type: Boolean,
      default: () => true
    },
    // 表单事件是否使用自定义事件，为false直接在formList回调
    isEmit: {
      type: Boolean,
      default: () => true
    },
    // 关闭时是否清除表单
    clearForm: {
      type: Boolean,
      default: () => true
    },
    // 文件列表
    fileList: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function() {
        return this.visible
      },
      set: function(e) {
        this.$emit('update:visible', e)
      }
    },
    // 头部标题
    title() {
      return this.headerTitle || (this.fileList.length > 0 ? '查看附件' : '')
    }
  },
  data() {
    return {
      forms: {},
      loading: false
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.api && (this.loading = true)
          this.$emit('confirm', this.forms)
        }
      })
    },
    handleCancel() {
      this.$emit('handleCancel')
      this.dialogVisible = false
    }
  },
  watch: {
    forms(e) {
      this.$emit('update:forms', e)
    },
   'forms.description'(e){   //问题补充弹框，问题和描述只有一个填写就可以了
      let falg = e?false:true;
      this.rules && this.$set(this.rules,'problemTypeId',[{ required: falg, message: '请选择质量问题描述', trigger: 'change' }])
    },
   'forms.problemTypeId'(val){ //问题补充弹框，问题和描述只有一个填写就可以了
      let falg = val?false:true;
      this.rules && this.$set(this.rules,'description',[{ required: falg,  message: '请输入质量问题补充'}])
    },
  'forms.checkTypeId'(val){   //监听检查类别，来设置样式
       this.$emit('changeRules',this.forms)
    },
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.$checkRequireItem()
          // 若是异步请求
          if (this.api) {
            this.loading = true
            this.api[this.apiName]({ id: this.form.id })
              .then(res => {
                this.loading = false
                this.$emit('beforeInit', res.data)
                this.forms = res.data
                this.$emit('getForm', res.data)
                this.$forceUpdate()
              })
              .catch(res => {
                this.loading = false
              })
          } else {
            // this.forms = this.form
            this.forms = this.$clone(this.form)
            this.$forceUpdate()
          }
        })
      } else {
        // 初始化表单
        this.loading = false
        // 是否清除表单
        if (this.clearForm) {
          // 页面会闪烁
          // this.forms = {}
          setTimeout(this.$refs.ruleForm.clearValidate)
        }
        this.$emit('beforeClose', this.forms)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dialogBox {
  max-height: calc(var(--heightVh) * 0.75 - 96px);
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  scrollbar-track-color: #fff;
  -ms-scrollbar-track-color: transparent;
  &::-webkit-scrollbar {
    background: #fff;
    width: 8px;
    height: 8px;
    // display: none;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    border: 1px #fff solid;
    background: #ccc;
  }
}
</style>
